<template>
  <el-container class="home-container">
    <!-- 导航 -->
    <el-header>
      <div style="margin-left: 20px">
        <img
          src="../assets/images/banner.png"
          style="width: 10%; height: 10%; margin-top: 5px"
        />
      </div>
      <!--  头像  -->
      <el-dropdown>
        <div class="block">
          <el-avatar
            style="font-size: 10px"
            v-if="currentUser.avatarUrl == null"
            >{{ currentUser.username }}</el-avatar
          >
          <el-avatar
            v-else
            style="font-size: 10px"
            :src="currentUser.avatarUrl"
          ></el-avatar>
        </div>
        <el-dropdown-menu slot="dropdown" trigger="click">
          <el-dropdown-item>
            <span type="danger" @click="psdShow = true">
              <span class="el-icon-view"></span> &nbsp;修改密码
            </span></el-dropdown-item
          >
          <el-dropdown-item>
            <span type="danger" @click="show = true">
              <span class="el-icon-ship"></span> &nbsp;吐槽大会
            </span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span type="danger" @click="logout">
              <span class="el-icon-switch-button"></span> &nbsp;退出登入
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 主体 -->
    <el-container>
      <!--  菜单    -->
      <el-aside :width="isCollapse ? '64px' : '210px'">
        <div class="toggle-btn" @click="toggleMenu">|||</div>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :router="true"
          :default-active="activePath"
          background-color="#fff"
          :collapse-transition="false"
          text-color="rgba(0,0,0)"
        >
          <MenuTree :menuList="this.menuList"></MenuTree>
        </el-menu>
      </el-aside>
      <!-- 右边主体 -->
      <el-main>
        <keep-alive
          include="user,admin,stu,tea,loginRecord,topicChecked,feedback,selfTopic,reference,report"
        >
          <router-view></router-view>
        </keep-alive>
        <div align="center" style="margin-top: 10px">
          <el-link type="info" href="http://www.beianw.com" disabled>
            © 2020 flame 赣ICP备20005291号-1</el-link
          >
        </div>
      </el-main>
      <el-dialog title="吐槽圣地" :visible.sync="show" width="400px">
        <el-form :model="issue" align="center">
          <el-form-item>
            <el-input
              type="textarea"
              v-model="issue.issueContent"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="feelback"
            >确 定</el-button
          >
          <el-button @click="show = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="密码修改" :visible.sync="psdShow" width="400px">
        <el-form :model="psd" align="center">
          <el-form-item label="新密码" label-width="70px">
            <el-input
              v-model="psd.psd"
              showPassword
              maxlength="50"
              show-word-limit
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" label-width="70px">
            <el-input
              v-model="psd.repeatPsd"
              showPassword
              maxlength="50"
              show-word-limit
              autocomplete="off"
              style="width: 220px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="editCurrentPsd"
            >确 定</el-button
          >
          <el-button @click="psdShow = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="centerDialogVisible"
        width="20%"
        align="center"
        center
      >
        <template>
          <div align="center">
            <slot name="title">
              <el-tooltip content="点击跳转至使用手册" placement="top">
                <el-link
                  style="font-size: 25px"
                  href="https://mp.weixin.qq.com/s?__biz=Mzg2NzQyODQ1OA==&mid=2247483953&idx=1&sn=973fda56338f98cedea561598d8da6e8&chksm=cebaf334f9cd7a225516330d5f2eefe6e5a2f54e69dd422b408f76c118ce80f52fc977e892a3&mpshare=1&scene=23&srcid=0125OREbzXqioLYt9hgvl5XG&sharer_sharetime=1611547009294&sharer_shareid=332628a26f275e1e016676473525b04b#rd"
                  >素拓小程序版</el-link
                >
              </el-tooltip>
            </slot>
          </div>
        </template>
        <img
          src="/mini.jpg"
          style="width: 100%; height: 100%; margin-top: 5px"
        />
      </el-dialog>
    </el-container>
  </el-container>
</template>
<script>
import { queryCurrentUserMenus, releaseIssue, editPsd } from "api/api";
import { mapMutations, mapState } from "vuex";
import MenuTree from "components/MenuTree";
export default {
  components: {
    MenuTree,
  },
  data() {
    return {
      currentUser: {},
      isCollapse: false,
      menuList: [],
      activePath: "", //激活的路径
      show: false,
      issue: {},
      loading: false,
      psdShow: false,
      psd: {},
      issueList: [],
      centerDialogVisible: true,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    ...mapMutations(["cleanHeader"]),
    //退出登录
    async logout() {
      var res = await this.$confirm("此操作将推出系统，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消退出登录",
        });
      });
      if (res == "confirm") {
        this.cleanHeader();
        window.sessionStorage.clear();
        this.$router.push("/login");
      }
    },
    //问题反馈
    feelback() {
      releaseIssue(this.userInfo.sessionId, this.issue).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.$message({
            type: "success",
            message: "吐槽成功！",
          });
          this.show = false;
          this.issue = {};
        }
      });
    },
    /** 伸缩菜单 */
    toggleMenu() {
      this.isCollapse = !this.isCollapse;
    },
    //获取当前用户的菜单信息
    async getCurrentUserMenus() {
      await queryCurrentUserMenus(this.userInfo.sessionId).then((res) => {
        if (!res.message) {
          this.$message.error(res.message);
        } else {
          this.menuList = res.data;
          window.sessionStorage.setItem("menus", JSON.stringify(res.data));
        }
      });
    },
    //修改密码
    editCurrentPsd() {
      if (this.psd.psd != this.psd.repeatPsd) {
        this.$message({
          type: "warning",
          message: "两次输入的密码不一致，请重新输入！",
        });
        return;
      }
      editPsd(this.userInfo.sessionId, this.psd.psd).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.$message({
            type: "success",
            message: "密码修改成功，请重新登录！",
          });
          this.psdShow = false;
        }
      });
    },
  },
  created() {
    this.currentUser = JSON.parse(window.sessionStorage.getItem("token"));
    this.getCurrentUserMenus();
    this.activePath = window.sessionStorage.getItem("activePath");
    if (this.activePath === "/home") {
      this.activePath = "/user";
    }
    this.$router.push(this.activePath);
  },
};
</script>
<style>
.el-header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 19px;
  padding-left: 0px;
  opacity: 0.8;
}
.el-aside {
  background-color: #fff;
  opacity: 0.8;
}
.el-main {
  background-color: #eaedf1;
  /* opacity:0.8; */
}
.home-container {
  width: 100%;
  height: 100%;
 
}
.toggle-btn {
  background-color: #ffffff;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  opacity: 0.8;
}
</style>